<template>
  <div class="app">
    <router-view v-if="isRouterActive"></router-view>
  </div>
</template>

<script setup>
import {ref, provide, nextTick} from 'vue'
import {useStore} from "@/store/index"

const store = useStore()

// 用来刷新页面
const isRouterActive = ref(true)
provide('reload', () => {
  isRouterActive.value = false
  nextTick(() => {
    isRouterActive.value = true
  })
})

</script>

<style lang="scss">
 html, body,  {
  width: 100%;
  height: 100%;
  background-color: #c2c2c2;
  z-index: -1;
  ::-webkit-scrollbar {
    display: none;
  }
}
// hover背景字体颜色需要和活动字体背景颜色相同

// 一级背景样式
.yu-bgColor {
  background-color: v-bind('store.theme.bgColor')!important;
  color: v-bind('store.theme.textColor') !important;
}

// 活动背景样式
.yu-bgColor-active{
  background-color: v-bind('store.theme.HoverBgColor');
  color: v-bind('store.theme.hoverTextColor');
}

// hover背景字体样式
.yu-bgColor-hover {
  &:hover {
    background-color: v-bind('store.theme.HoverBgColor');
    color: v-bind('store.theme.hoverTextColor');
    cursor: pointer;
  }
}

// 二级背景,字体
.yu-bgColor-two {
  background-color: v-bind('store.theme.secondaryBgColor');
  color: v-bind('store.theme.textColor');
}

// 二级背景活动
.yu-bgColor-two-active {
  background-color: v-bind('store.theme.HoverBgColor');
  color: v-bind('store.theme.hoverTextColor');
}

// 活动字体不需要hover
.yu-textColor-active {
  color: v-bind('store.theme.hoverTextColor')!important;
}

// 二级活动背景只有背景
.yu-bgColor-two-active-only {
  background-color: v-bind('store.theme.HoverBgColor');
}

// 二级背景hover
.yu-bgColor-two-hover {
  &:hover {
    background-color: v-bind('store.theme.HoverBgColor');
    color: v-bind('store.theme.hoverTextColor');
    cursor: pointer;
  }
}

// 只是一级背景
.yu-bgColor-one-only {
  background-color: v-bind('store.theme.bgColor');
}

// 只是二级背景
.yu-bgColor-tew-only {
  background-color: v-bind('store.theme.secondaryBgColor');
}

// 只是hover背景
.yu-bgColor-hover-only {
  &:hover {
    background-color: v-bind('store.theme.HoverBgColor');
    cursor: pointer;
  }
}
// 字体颜色
.yu-color-text {
  color: v-bind('store.theme.textColor');
}

// 标题默认颜色
.yu-titleColor {
  color: v-bind('store.theme.titleTextColor');
}


// hover字体颜色
.yu-textColor-hover {
  &:hover {
    cursor: pointer;
    color: v-bind('store.theme.hoverTextColor')!important;
  }
}
// 一级hover背景
.yu-one-hover-bgColor {
  &:hover {
    background-color: v-bind('store.theme.HoverBgColor');
    cursor: pointer;
  }
}
</style>
